<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('图表')" />
	<th:block th:include="include :: header('customer list')" />
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">



			<div class="ibox-content text-center h-200">
				<div class="echarts" id="echarts-pie-chart"></div>
			</div>


			<div class="ibox-content text-center h-200">
				<div class="echarts" id="echarts-pie-states"></div>
			</div>


		</div>
	</div>
    <div th:include="include :: footer"></div>
	 <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/customer";
        $(function() {
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
            $.operate.post(prefix+"/gender",null,function (data) {
				console.log(data);
                var pieoption = {
                    title : {
                        text: 'gender',
                        subtext: 'customer gender analysis',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    calculable : true,
                    series : [
                        {
                            name:'gender',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:data.rows
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);

            });

            var statePieChart = echarts.init(document.getElementById("echarts-pie-states"));
            $.operate.post(prefix+"/state",null,function (data) {
                console.log(data);
                var pieoption = {
                    title : {
                        text: 'state',
                        subtext: 'customer state analysis',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    calculable : true,
                    series : [
                        {
                            name:'gender',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:data.rows
                        }
                    ]
                };
                statePieChart.setOption(pieoption);
                $(window).resize(statePieChart.resize);

            });

            var options = {
                url: prefix + "/gender",
                modalName: "customerCount",
                columns: [
				{
					field : 'gender',
					title : 'gender',
                    sortable: true
				},
				{
					field : 'genderCount',
					title : 'gender count',
					sortable: true
				}
		      ]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>